<!--********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./../../cesium/Cesium1.98/Widgets/widgets.css">
    <script type="text/javascript" src="./../../cesium/Cesium1.98/Cesium.js"></script>
    <script src="./popup.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }

        .bx-popup-ctn2 {
            position: absolute;
            z-index: 999;
            color: #fff;
            /* margin: -80px 0 0; */
            margin: 0 0 0 0;
            transform: translate(-50%, -100%)
        }

        .bx-popup-ctn2 .divpoint-wrap {
            padding: 0;
            width: max-content
        }

        .bx-popup-ctn2 .divpoint-center {
            background: linear-gradient(45deg, #4f869d, rgba(18, 93, 120, .65), 40%, rgba(30, 127, 162, .65));
            border: 1px solid #40aee2;
            border-radius: 5px;
            box-shadow: 0 0 10px 2px #29baf1
        }

        .bx-popup-ctn2 .bx-popup-tip {
            width: 17px;
            background: #fff;
            height: 17px;
            padding: 1px;
            margin: -10px auto 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .bx-popup-ctn2 .bx-popup-header-ctn {
            background: rgba(0, 173, 255, .49);
            color: #fff;
            font-size: 15px;
            padding: 4px
        }

        .bx-popup-ctn2 .bx-popup-close {
            position: absolute;
            top: 4px;
            right: 2px;
            width: 26px;
            height: 26px;
            cursor: pointer
        }

        .bx-popup-ctn2 .bx-popup-content-ctn {
            padding: 10px
        }

        .bx-popup-ctn2 .directional {
            bottom: 0;
            left: 0;
            width: 2px;
            height: 40px;
            background-color: #28bbf0;
            transform: none;
            margin: 0 0 0px 50%
        }

        .bx-popup-ctn2 .divpoint-border {
            transition: .3s ease-in;
            background: linear-gradient(0, #8cdee5 2px, #8cdee5 0) no-repeat, linear-gradient(-90deg, #8cdee5 2px, #8cdee5 0) no-repeat, linear-gradient(-180deg, #8cdee5 2px, #8cdee5 0) no-repeat, linear-gradient(-270deg, #8cdee5 2px, #8cdee5 0) no-repeat;
            background-size: 0 2px, 2px 0, 0 2px, 2px 0;
            background-position: 0 0, 100% 0, 100% 100%, 0 100%
        }

        .bx-popup-ctn2 .divpoint-border:hover {
            background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%
        }
    </style>
</head>

<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript">

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjQ5ZGUzNC1jNWYwLTQ1ZTMtYmNjYS05YTY4ZTVmN2I2MDkiLCJpZCI6MTE3MTM4LCJpYXQiOjE2NzY0NDUyODB9.ZaNSBIfc1sGLhQd_xqhiSsc0yr8oS0wt1hAo9gbke6M'
        const viewer = new Cesium.Viewer('map', {});

        // Cesium地形
        viewer.terrainProvider = Cesium.createWorldTerrain({
            requestWaterMask: true, // 请求水体效果所需要的海岸线数据
            requestVertexNormals: true// 请求地形照明数据
        });

        // 开启帧率
        viewer.scene.debugShowFramesPerSecond = true;


        var hello = viewer.entities.add({
            name: '贴地',
            position: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
            point: {
                pixelSize: 5,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 2,
                verticalOrigin: Cesium.VerticalOrigin.TOP,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,

            }
        });

        //弹窗
        var popup = new Popup({
            viewer: viewer,
            className: "bx-popup-ctn2"
        });

        popup.add({
            geometry: Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
            content: {
                header: "数据点",
                content: `
              <div><span>监控名称：</span><span>中国银行(银河三路店)</span></div>
              <div><span>监控编号：</span><span>${parseInt(Math.random() * 100)}</span></div>
              <div><span>监控类型：</span><span>固定枪机</span></div>
              <div><span>监控状态：</span><span>在线</span></div>
                  `
            },
            isclose: true
        });

        var p2 = popup.add({
            geometry: Cesium.Cartesian3.fromDegrees(-100, 30),
            content: {
                header: "数据点2",
                content: `
              <div><span>监控名称：</span><span>中国银行(银河2路店)</span></div>
              <div><span>监控编号：</span><span>${parseInt(Math.random() * 100)}</span></div>
              <div><span>监控类型：</span><span>固定枪机</span></div>
              <div><span>监控状态：</span><span>在线</span></div>
                  `
            },
            isclose: true
        });


        //弹窗
        var popup2 = new Popup({
            viewer: viewer,
            className: "bx-popup-ctn2",
            html: function (header, content) {
                return `
            <div class="divpoint-wrap">
            <div class="divpoint-center">
            <div class="bx-popup-content-ctn" >
            <div class="bx-popup-content" >
            ${content}
            </div>
            </div>
            </div>
            </div>
            <div class="directional"></div>
            `;
            }
        });
        var p3 = popup2.add({
            geometry: Cesium.Cartesian3.fromDegrees(-80, 0),
            content: {
                content: `
              <div><span>监控名称：</span><span>中国银行(银河三路店)</span></div>
              <div><span>监控编号：</span><span>${parseInt(Math.random() * 100)}</span></div>
              <div><span>监控类型：</span><span>固定枪机</span></div>
              <div><span>监控状态：</span><span>在线</span></div>
                  `
            },
            isclose: false
        });


    </script>
</body>

</html>